<template>
	<div>
		<ElForm inline inline-message>
			<ElFormItem label="权益">
				<ElText type="danger">{{ (account?.Balance || 0).toFixed(2) }}</ElText>
			</ElFormItem>
			<ElFormItem label="可用">
				<ElText type="danger">{{ (account?.Available || 0).toFixed(2) }}</ElText>
			</ElFormItem>
			<ElFormItem label="持仓盈亏">
				<ElText type="danger">{{ (account?.PositionProfit || 0).toFixed(2) }}</ElText>
			</ElFormItem>
			<ElFormItem label="平仓盈亏">
				<ElText type="danger">{{ (account?.CloseProfit || 0).toFixed(2) }}</ElText>
			</ElFormItem>
			<ElFormItem label="保证金">
				<ElText type="danger">{{ (account?.CurrMargin || 0).toFixed(2) }}</ElText>
			</ElFormItem>
			<ElFormItem label="出入金">
				<ElText type="danger">{{ ((account?.Deposit || 0) - (account?.Withdraw || 0)).toFixed(2) }}</ElText>
			</ElFormItem>
		</ElForm>
	</div>
</template>

<script setup lang="ts">
import type { Account } from '~/utils/types'
const account = ref<Account>()
const { data: accounts, refresh: refreshAccount } = await useHttp.getLazy<Account[]>('/account')
watch(accounts, () => {
	if (accounts.value && accounts.value.length > 0) account.value = accounts.value[0]
})
onMounted(() => refreshAccount())
</script>

<style scoped></style>
